<!--穿梭框组件 -->
<!-- 使用示例 -->
<!-- <div class="transferDiv">
	<transfer :leftData="personnelData" :titles="['待选人员', '已选人员']" :selectedData="selectMembers"></transfer>
</div> -->
<template>
	<div class="transferbox">
		<div class="leftbox">
			<div class="hd" @click="checkAll()">
				<el-checkbox class="checkbox" :value="isChoseAll()" style="pointer-events: none;">{{titles[0]}}
				</el-checkbox>
			</div>
			<div class="searchbox">
				<el-input clearable v-model="leftSeachText" size="mini"> </el-input>
			</div>
			<div class="scollview">
				<template v-if="leftData">
					<template v-for="(item,index) in leftData">
						<!-- 判断是不是排除了这一项 如果是就什么都没有 -->
						<template v-if="isPaiChuLeft(item)">
							<!-- 没有东西 -->
						</template>
						<!-- 如果已经在右边了，背景变暗 -->
						<template v-else-if="isInRight(item)">
							<div class="itemsty an" :key="item[keystring]">
								<el-checkbox disabled="" :value="false" style="pointer-events: none;">
									{{item[label]}}
								</el-checkbox>
							</div>
						</template>
						<!-- 如果被选了，背景变亮 -->
						<template v-else-if="isSelected(item)">
							<div class="itemsty liang" :key="item[keystring]" @click="cancelItem(item)">
								<el-checkbox :value="true" style="pointer-events: none;">{{item[label]}}
								</el-checkbox>
							</div>
						</template>
						<!-- 如果没选，不变 -->
						<template v-else>
							<div class="itemsty" :key="item[keystring]" @click="choseItem(item)">
								<el-checkbox :value="false" style="pointer-events: none;display: inline-block;">
									{{item[label]}}
								</el-checkbox>
							</div>
						</template>
					</template>
				</template>
			</div>
		</div>
		<div class="centerbox">
			<el-button v-blur type="primary" plain icon="el-icon-arrow-left" class="buttonleft" @click="leftoperation">
			</el-button>
			<el-button v-blur type="primary" plain icon="el-icon-arrow-right" class="buttonright"
				@click="rightoperation">
			</el-button>
		</div>
		<div class="rightbox">
			<div class="hd" @click="checkAllRight()">
				<el-checkbox class="checkbox" :value="isChoseAllRight()" style="pointer-events: none;">{{titles[1]}}
				</el-checkbox>
			</div>
			<div class="searchbox">
				<el-input clearable v-model="rightSeachText" size="mini"> </el-input>
			</div>
			<div class="scollview">
				<template v-for="(item,index) in selectedData">
					<template v-if="isPaiChuRight(item)">
						<!-- 没有东西 -->
					</template>
					<!-- 如果被选了，背景变亮 -->
					<template v-else-if="isSelectedRight(item)">
						<div class="itemsty liang" :key="item[keystring]" @click="cancelItemRight(item)">
							<el-checkbox :value="true" style="pointer-events: none;">{{item[label]}}
							</el-checkbox>
						</div>
					</template>
					<!-- 如果没选，不变 -->
					<template v-else>
						<div class="itemsty" :key="item[keystring]" @click="choseItemRight(item)">
							<el-checkbox :value="false" style="pointer-events: none;">{{item[label]}}
							</el-checkbox>
						</div>
					</template>
				</template>
			</div>
		</div>
	</div>
</template>

<script>
	import bus from '@/js/busEvent.js'
	export default {
		name: 'transfer',
		props: {
			//key值对应的关键字
			keystring: {
				type: String,
				default: 'code'
			},
			//名称对应的关键字
			label: {
				type: String,
				default: 'name'
			},

			leftData: Array,
			titles: Array,
			//选中的数据
			selectedData: Array,
		},
		data() {
			return {
				selectData: [], //是否勾选数组
				selectDataRight: [],
				leftSeachText: "",
				rightSeachText: "",
			}
		},
		created() {

		},
		methods: {
			isPaiChuLeft(item) {
				if (this.leftSeachText == null || this.leftSeachText == "") {
					return false;
				}
				let name = item[this.label]
				if (name == null) {
					return false
				}

				let index = name.indexOf(this.leftSeachText)
				if (index == -1) {
					return true;
				}
				return false;
			},
			isChoseAll() {
				if (this.leftData.length == 0) {
					return false
				}
				let canchosenum = 0;
				for (let i = 0; i < this.leftData.length; i++) {
					let item = this.leftData[i]
					if (this.isPaiChuLeft(item)) {
						continue
					}
					if (this.isInRight(item)) {
						continue
					}
					canchosenum++;
					if (!this.isSelected(item)) {
						return false
					}
				}
				//如果就没有可选的东西 也是返回false
				if (canchosenum == 0) {
					return false;
				}
				return true
			},
			checkAll() {
				//如果全选了，就取消全选
				if (this.isChoseAll()) {
					this.selectData.splice(0, this.selectData.length)
				} else {
					for (let i = 0; i < this.leftData.length; i++) {
						//判断在不在右侧数据，在的话，禁选；否则放在selectData里
						let item = this.leftData[i]
						//排除的 不处理
						if (this.isPaiChuLeft(item)) {
							continue
						}
						//已经在右边的 不处理
						if (this.isInRight(item)) {
							continue
						}
						//其余的 选中
						this.choseItem(item)
					}
				}
			},
			checkAllRight() {
				//如果全选了，就取消全选
				if (this.isChoseAllRight()) {
					this.selectDataRight.splice(0, this.selectDataRight.length)
				} else {
					for (let i = 0; i < this.selectedData.length; i++) {
						//判断在不在右侧数据，在的话，禁选；否则放在selectData里
						let item = this.selectedData[i]
						//排除的 不处理
						if (this.isPaiChuRight(item)) {
							continue
						}
						//其余的 选中
						this.choseItemRight(item)
					}
				}
			},
			isChoseAllRight() {
				if (this.selectDataRight.length == 0) {
					return false
				}
				let canchosenum = 0;
				for (let i = 0; i < this.selectDataRight.length; i++) {
					let item = this.selectDataRight[i]
					if (this.isPaiChuRight(item)) {
						continue
					}
					canchosenum++;
					if (!this.isSelectedRight(item)) {
						return false
					}
				}
				if (canchosenum == 0) {
					return false;
				}
				return true
			},
			isPaiChuRight(item) {
				if (this.rightSeachText == null || this.rightSeachText == "") {
					return false;
				}
				let index = item[this.label].indexOf(this.rightSeachText)
				if (index == -1) {
					return true;
				}
				return false;
			},
			//判断对象在不在数组里边，在返回位置，否则返回-1
			indexInArray(array, item) {
				for (let i = 0; i < array.length; i++) {
					if (item[this.keystring] == array[i][this.keystring]) {
						return i
					}
				}
				return -1
			},
			cancelItem(item) {
				let index = this.indexInArray(this.selectData, item)
				this.selectData.splice(index, 1)
			},
			choseItem(item) {
				if (this.indexInArray(this.selectData, item) == -1) {
					this.selectData.push(item)
				}
			},
			choseItemRight(item) {
				bus.$emit('personalInfo', item)
				if (this.indexInArray(this.selectDataRight, item) == -1) {
					this.selectDataRight.push(item)
				}
			},
			cancelItemRight(item) {
				let index = this.indexInArray(this.selectDataRight, item)
				this.selectDataRight.splice(index, 1)
			},
			//判断左侧数据被没被选中，is返回是不是
			isSelected(item) {
				if (this.indexInArray(this.selectData, item) == -1) {
					return false
				}
				return true
			},
			//判断右侧数据被没被选中，is返回是不是
			isSelectedRight(item) {
				if (this.indexInArray(this.selectDataRight, item) == -1) {
					return false
				}
				return true
			},
			//判断在不在右边
			isInRight(item) {
				if (this.indexInArray(this.selectedData, item) == -1) {
					return false
				}
				return true
			},
			rightoperation() {
				if (this.selectData.length > 0) {
					for (let i = 0; i < this.selectData.length; i++) {
						let item = this.selectData[i]
						if (this.indexInArray(this.selectedData, item) == -1) {
							this.selectedData.push(item)
						}
					}
				}
				this.selectData = []
			},
			leftoperation() {
				if (this.selectDataRight.length > 0) {
					for (let i = 0; i < this.selectDataRight.length; i++) {
						let item = this.selectDataRight[i]
						let index = this.indexInArray(this.selectedData, item)
						this.selectedData.splice(index, 1)
					}
				}
				this.selectDataRight = []
			}
		}
	}
</script>

<style scoped lang="scss">
	/* 滚动条 */
	::-webkit-scrollbar {
		width: 8px;
		height: 100%;
	}

	::-webkit-scrollbar-thumb {
		/*滚动条里面小方块*/
		border-radius: 5px;
		-webkit-box-shadow: inset 0 0 5px #F4F8FF;
		box-shadow: inset 0 0 5px #F4F8FF;
		background: #F4F8FF;
	}

	::-webkit-scrollbar-track {
		// -webkit-box-shadow: inset 0 0 5px rgba(14,54,94, 0.2);
		// box-shadow: inset 0 0 5px rgba(14,54,94, 0.2);
		// border-radius: 5px;
		// background: rgba(14,54,94, 0.1);
	}

	//避免边框变红
	/deep/ .el-input__inner {
		border-color: #B9DAF2 !important;
	}

	.transferbox {
		width: 100%;
		height: 100%;
		display: flex;
		overflow: hidden;
		font-size: 0;
	}

	.leftbox {
		display: inline-block;
		width: 40%;
		height: 100%;
		vertical-align: middle;
		border: 1px solid #ebeef5;
		padding: 5px;
	}

	.hd {
		width: 100%;
		height: 40px;
		line-height: 40px;
		vertical-align: middle;
		text-align: left;
	}

	.checkbox {
		display: inline-block;
		width: 5%;
		font-size: 30px;
		line-height: 40px;
		height: 40px;
		vertical-align: middle;
	}

	.searchbox {
		width: 95%;
		height: 30px;
		line-height: 30px;
	}

	.scollview {
		width: 100%;
		height: calc(100% - 70px);
		overflow-y: scroll;
	}

	.centerbox {
		display: inline-block;
		position: relative;
		width: 20%;
		height: 100%;
		vertical-align: middle;
	}

	.buttonleft {
		position: absolute;
		top: 48%;
		left: 15%;
	}

	.buttonright {
		position: absolute;
		top: 48%;
		right: 15%;
	}

	.rightbox {
		display: inline-block;
		width: 40%;
		height: 100%;
		vertical-align: middle;
		border: 1px solid #ebeef5;
		padding: 5px;
	}

	.itemsty {
		width: 95%;
		height: 30px;
		line-height: 30px;
		vertical-align: middle;
		cursor: pointer;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: left;
	}

	.liang {
		color: red;
	}

	.an {
		color: #dddddd;
		cursor: not-allowed;
	}
</style>
